import React, {Component, Fragment} from 'react'
import './check.css'
import type from './image/type.png'
import sole from './image/sole.png'
import double from './image/double.png'
import write from './image/write.png'
import click from './image/click.png'
import set from './image/set.png'
import del from './image/del.png'
import add from './image/add.png'
import reduce from './image/reduce.png'
import radio from './image/radio.png'
import two from './image/two.png'


class Check extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: '问卷标题',
            endValue: '您已完成本次问卷，感谢您的帮助与支持',
            list: [],
            id: 0,

        };
    }

    twoInput = () => {
        let {list, id} = this.state
        let ownInput = {
            optionlist: [
                {option: '', id: id}, {option: '', id: id + 1}
            ]
        }
        ownInput.id = id + 1;
        ownInput.title = ""
        ownInput.chooseType = 3;
        this.setState({
            list: [...list, ownInput],
            id: id + 1,

        })
    }
    //点击单选增加单选的选项
    ownInput = () => {
        let {list, id} = this.state
        let ownInput = {
            optionlist: [
                {option: '', id: id}, {option: '', id: id + 1}
            ]
        }
        ownInput.id = id + 1;
        ownInput.title = ""
        ownInput.chooseType = 2;
        this.setState({
            list: [...list, ownInput],
            id: id + 1,

        })

    }
    addOption = (index) => {
        const {list, id} = this.state
        const option = [{option: '', id: id + 1}]
        list[index].optionlist = [...list[index].optionlist, ...option]
        this.setState({
            list,
            id: id + 1
        })
    }
    //点击填空增加填空的选项
    addInput = () => {
        let {list, id} = this.state
        let inputObj = {};
        inputObj.id = id + 1;
        inputObj.title = "";
        inputObj.chooseType = 1;
        this.setState({
            list: [...list, inputObj],
            id: id + 1
        })
    }
    setOptionValue = (e, index, optionIndex) => {
        const {list} = this.state
        list[index].optionlist[optionIndex].option = e.target.value
        this.setState({
            list
        })

    }
    setInput = (e, index) => {
        const {list} = this.state
        if (index >= 0) {
            list[index].title = e.target.value;
            this.setState({
                list
            })
        }
    }
    //动态减少option里面的内容
    delOption = (index, optionIndex) => {
        const {list} = this.state
        if (list[index].optionlist.length == 2) {
            alert("最少保留两个选项")
            return
        }
        list[index].optionlist.splice(optionIndex, 1)
        this.setState({
            list
        })


    }

    del = (index) => {
        const {list} = this.state
        list.splice(index, 1)
        this.setState({
            list
        })
    }


    render() {
        const {title, endValue, list} = this.state
        return (
            <Fragment>
                {console.log(list)}
                <div className="start">
                    <div className="head">
                        <div className="title head-item">{title || '问卷标题'}</div>
                        <div className="cat head-item">
                            <button className="preview">预览</button>
                            <button className="issue">发布</button>
                        </div>
                    </div>
                </div>
                <div className="main">
                    <div className="main-type">
                        <div className="type">
                            <div className="type-title">题目类型</div>
                            <div className="type-image"><img src={type} alt="类型"/></div>
                        </div>
                        <div className="choose" onClick={this.ownInput}>
                            <div className="choose-icon">
                                <img src={sole} alt="单选题"/>
                            </div>
                            <div className="choose-type">单选题</div>
                        </div>
                        <div className="choose" onClick={this.twoInput}>
                            <div className="choose-icon">
                                <img src={double} alt="多选题"/>
                            </div>
                            <div className="choose-type">多选题</div>
                        </div>
                        <div className="choose" onClick={this.addInput}>
                            <div className="choose-icon">
                                <img src={write} alt="填空题"/>
                            </div>
                            <div className="choose-type">填空题</div>
                        </div>
                    </div>
                    <div className="main-content">
                        <div className="check-title">
                            <div className="check-input-title">
                                <input className="title-input" value={title} onChange={(e) => this.inputChange(e)}
                                       placeholder="问卷标题"/>
                            </div>
                        </div>
                        {/*暂时隐藏*/}
                        {list.length == 0 && <div className="tip">
                            <div className="tip-icon">
                                <img src={click}/>
                            </div>
                            <div>点击题目类型进行问卷设计吧</div>
                        </div>}

                        {/*-----------------单选类型--------------*/}
                        {
                            list.map((item, index) => {
                                    if (item.chooseType == 2) {
                                        return <div className="person fill" key={item.id}>
                                            <div className="fill-top">
                                                <div className="fill-index">{index + 1}</div>
                                                <div className="fill-right">
                                                    <div className="fill-box"><input className="fill-input" type="text"
                                                                                     value={item.title}
                                                                                     onChange={(e) => this.setInput(e, index)}
                                                                                     placeholder="请选择一个选项（单选）"/></div>
                                                </div>
                                                <div className="fill-icon">
                                                    <div className="fill-item" onClick={() => this.addOption(index)}><img
                                                        src={add} alt="题目增加选项"/></div>
                                                    <div className="fill-item fill-set"><img src={set} alt="题目设置"/></div>
                                                    <div className="fill-item" onClick={(e) => this.del(index)}><img
                                                        src={del} alt="删除题目"/></div>
                                                </div>
                                            </div>
                                            {/*循环option选项*/}
                                            {item.optionlist.map((itemNode, optionIndex) => {
                                                    return <div className="fill-top" key={itemNode.id}>
                                                        <div className="fill-right">
                                                            <div className="fill-box fill-option">
                                                                <div><img className="radio" src={radio} alt=""/></div>
                                                                <input className="fill-input options-input" type="text"
                                                                       onChange={(e) => this.setOptionValue(e, index, optionIndex)}
                                                                       placeholder="选项"/></div>
                                                        </div>
                                                        <div className="fill-icon">
                                                            <div className="fill-item fill-set"><img src={set} alt="题目设置"/>
                                                            </div>
                                                            <div className="fill-item"
                                                                 onClick={(e) => this.delOption(index, optionIndex)}><img
                                                                src={reduce} alt="删除题目"/></div>
                                                        </div>
                                                    </div>

                                                }
                                            )}
                                        </div>
                                    } else if (item.chooseType == 1) {
                                        return <div key={item.id}>
                                            <div className="fill">
                                                <div className="fill-top">
                                                    <div className="fill-index">{index + 1}</div>
                                                    <div className="fill-right">
                                                        <div className="fill-box"><input className="fill-input" type="text"
                                                                                         value={item.title}
                                                                                         onChange={(e) => this.setInput(e, index)}
                                                                                         placeholder="请输入本项问卷内容"/></div>
                                                    </div>
                                                    <div className="fill-icon">
                                                        <div className="fill-item fill-set"><img src={set} alt="题目设置"/>
                                                        </div>
                                                        <div className="fill-item" onClick={(e) => this.del(index)}><img
                                                            src={del} alt="删除题目"/></div>
                                                    </div>
                                                </div>
                                                <div className="fill-bottom">
                                                    <div className="fill-bottom-box"></div>
                                                </div>
                                            </div>

                                        </div>
                                    } else {
                                        return <div className="person fill" key={item.id}>
                                            <div className="fill-top">
                                                <div className="fill-index">{index + 1}</div>
                                                <div className="fill-right">
                                                    <div className="fill-box"><input className="fill-input" type="text"
                                                                                     value={item.title}
                                                                                     onChange={(e) => this.setInput(e, index)}
                                                                                     placeholder="请选择一个选项（多选）"/></div>
                                                </div>
                                                <div className="fill-icon">
                                                    <div className="fill-item" onClick={() => this.addOption(index)}>
                                                        <img
                                                            src={add} alt="题目增加选项"/></div>
                                                    <div className="fill-item fill-set"><img src={set} alt="题目设置"/>
                                                    </div>
                                                    <div className="fill-item" onClick={(e) => this.del(index)}><img
                                                        src={del} alt="删除题目"/></div>
                                                </div>
                                            </div>
                                            {/*循环option选项*/}
                                            {item.optionlist.map((itemNode, optionIndex) => {
                                                    return <div className="fill-top" key={itemNode.id}>
                                                        <div className="fill-right">
                                                            <div className="fill-box fill-option">
                                                                <div><img className="radio" src={two} alt=""/></div>
                                                                <input className="fill-input options-input" type="text"
                                                                       onChange={(e) => this.setOptionValue(e, index, optionIndex)}
                                                                       placeholder="选项"/></div>
                                                        </div>
                                                        <div className="fill-icon">
                                                            <div className="fill-item fill-set"><img src={set} alt="题目设置"/>
                                                            </div>
                                                            <div className="fill-item"
                                                                 onClick={(e) => this.delOption(index, optionIndex)}><img
                                                                src={reduce} alt="删除题目"/></div>
                                                        </div>
                                                    </div>

                                                }
                                            )}
                                        </div>
                                    }
                                }
                            )

                        }

                        {/*-----------------多选--------------*/}
                        <div className="finish">
                            <div className="finish-title">
                                <input className="finish-title-input" placeholder="点击编辑结束语" value={endValue}
                                       onChange={(e) => this.endChange(e)}/>
                            </div>
                            <div className="submit issue">发布</div>
                        </div>
                    </div>

                </div>

            </Fragment>
        )

    }


    inputChange(e) {
        this.setState({
            title: e.target.value
        })
    }

    endChange(e) {
        this.setState({
            endValue: e.target.value
        })
    }
}

export default Check
